// .background {
//   position: absolute;
//   top: 0;
//   left: 0;
//   width: 100%;
//   z-index: -1;
//   height: 40%;
// }

//swiper.wxss
swiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  //套用计算swiper高度的公式
  height: calc(100vw * 442 / 810);
}
image {
  //图片自适应屏幕大小
  width: 100%;
}
.content {
  display: flex;
  position: relative;
  margin-top: 30%; /* 设置与swiper相同的高度作为上边距 */
  flex-wrap: wrap; /* 允许换行 */
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
  background-color: rgb(255, 255, 255); /* 背景颜色为白色 */
  padding: 10px; /* 内边距 */
  width: 80%;
  border-radius: 10px; /* 圆角 */
  box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
  transition: box-shadow 0.3s ease; /* 平滑过渡效果 */
}

.item {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  align-items: center; /* 水平居中对齐 */
  margin: 5px; /* 外边距 */
  width: calc(33.33% - 20px); /* 计算宽度以适应三列布局 */
  box-sizing: border-box; /* 包含内边距和边框在宽度内 */
  text-align: center; /* 文本居中 */
  font-size: 14px;
}

.item:active {
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1); /* 点击时减少阴影 */
}

.icon {
  width: 40px; /* 图标宽度 */
  height: 40px; /* 图标高度 */
  margin-bottom: 5px; /* 图标与文本之间的间距 */
}

.primary {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin: 3%;
}

.image-container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  margin-left: 5%;
  width: 90%;
}

.image-item {
  position: relative;
  margin: 5px;
  height: 200rpx; /* 图片高度 */
  border-radius: 10px; /* 圆角 */
  width: calc(50% - 10px); /* 每行三张图片，减去外边距 */
  overflow: hidden; /* 防止内容溢出 */
}

.camp-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例并填充容器 */
  border-radius: 10px; /* 圆角 */
}

.camp-info {
  position: absolute;
  bottom: 0;
  justify-content: flex-start;
  color: white;
  padding: 5px;
  border-radius: 0 0 10px 0; /* 右下角圆角 */
}

.camp-name,
.camp-location {
  font-size: 14px;
  margin: 0;
}
